<template>
  <div class="fryyoung">
    <Header />

    <div class="container">
      <div class="card banner">
        <h3>fryyoung</h3>
        <p class="introduce">Visit the fryyoung storefront</p>
        <div class="flex star-box">
          <i class="star-icon"></i>
          <p class="flex"><span>86% positive</span> in the last 12 months (44 ratings)</p>
        </div>
      </div>
      <div class="card flex flex-between about">
        <div class="about-left">
          <h4>About Seller</h4>
          <p>fryyoung is committed to providing each customer with the highest standard of customer service.</p>
        </div>
        <div class="about-right">
          <h5>Have a question for fryyoung?</h5>
          <div class="btn-box">Ask a question</div>
        </div>
      </div>
      <div class="feedback">
        <h4>Feedback</h4>
        <div class="star-content">
          <div class="star-left">
            <div class="flex flex-between ratings">
              <div class="rating-left">
                <i class="star-icon"></i>
                <p>4.4out of 5</p>
              </div>
              <div class="select-box">
                <p>12 months</p>
                <i class="arrow-down-icon"></i>
              </div>
            </div>
            <ul class="percentage-list">
              <li>
                <span>5 star</span>
                <div class="percentage-box"><p></p></div>
                <span>73%</span>
              </li>
              <li>
                <span>4 star</span>
                <div class="percentage-box"><p></p></div>
                <span>14%</span>
              </li>
              <li>
                <span>3 star</span>
                <div class="percentage-box"><p></p></div>
                <span>2%</span>
              </li>
              <li>
                <span>2 star</span>
                <div class="percentage-box"><p></p></div>
                <span>2%</span>
              </li>
              <li>
                <span>1 star</span>
                <div class="percentage-box"><p></p></div>
                <span>9%</span>
              </li>
            </ul>
            <p class="rating-tip">Learn more about how seller feedback works on Amazon</p>
            <h5>Share your thoughts with other customers</h5>
            <div class="btn-box">Leave seller feedback</div>
          </div>
          <div class="star-right">
            <p class="month-tip">44total feedback in12 months</p>
            <ul class="evaluate-list">
              <li>
                <i class="star-icon"></i>
                <div class="evaluate-info">
                  <p class="answer through">"I didn’t get my refund yet"</p>
                  <p class="evaluate-date">By Amazon Customer on February 2, 2023.</p>
                  <p class="flex from">
                    <span>Message from Amazon: </span>
                    This item was fulfilled by Amazon, and we take responsibility for this fulfilment experience.
                  </p>
                </div>
              </li>
              <li>
                <i class="star-icon"></i>
                <div class="evaluate-info">
                  <p class="answer">"Ha e not tried the mattress yet but it looks like ot will be great! Delivery was faster than expected as well"</p>
                  <p class="evaluate-date">By Suzanne Cloutier on January 19, 2023.</p>
                </div>
              </li>
              <li>
                <i class="star-icon"></i>
                <div class="evaluate-info">
                  <p class="answer">"Ha e not tried the mattress yet but it looks like ot will be great! Delivery was faster than expected as well"</p>
                  <p class="evaluate-date">By Suzanne Cloutier on January 19, 2023.</p>
                </div>
              </li>
              <li>
                <i class="star-icon"></i>
                <div class="evaluate-info">
                  <p class="answer">"Ha e not tried the mattress yet but it looks like ot will be great! Delivery was faster than expected as well"</p>
                  <p class="evaluate-date">By Suzanne Cloutier on January 19, 2023.</p>
                </div>
              </li>
              <li>
                <i class="star-icon"></i>
                <div class="evaluate-info">
                  <p class="answer through">"Doesn't hold air"</p>
                  <p class="evaluate-date">By Len Swaffield on January 1, 2023.</p>
                  <p class="flex from">
                    <span>Message from Amazon: </span>
                    This item was fulfilled by Amazon, and we take responsibility for this fulfilment experience.
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  components: { Header }
}
</script>

<style lang="less" scoped>
.fryyoung {
  background-color: #e3e6e6;

  .btn-box {
    width: 232px;
    height: 27px;
    text-align: center;
    line-height: 27px;
    border: 1px solid #D5D9D9;
    box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
    background-color: #fff;
    border-radius: 7px;
    cursor: pointer;
  }
}
.container {
  width: 1462px;
  margin: 0 auto;
}
.card {
  padding: 14px 18px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px 5px #e3e6e6;

  h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
  }

  h5 {
    font-weight: 600;
    line-height: 18px;
  }
}
.banner {
  position: sticky;
  margin-top: 22px;

  h3 {
    font-size: 28px;
    line-height: 36px;
  }

  .introduce {
    padding: 8px 0;
    color: #007185;
    line-height: 18px;
    cursor: pointer;
  }

  .star-box {

    i {
      width: 80px;
      height: 18px;
      background: url(../../assets/images/amz_star.png) no-repeat -2px -42px;
      background-size: 512px;
    }
    p {
      position: relative;
      height: 18px;
      padding-left: 9px;
      margin-left: 9px;
      color: #007185;
      cursor: pointer;
      ::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        height: 14px;
        width: 1px;
        background-color: #ddd;
      }

      span {
        margin-right: 4px;
        font-weight: 600;
      }
    }
  }
}
.about {
  .about-left {

    p {
      margin-top: 8px;
      line-height: 20px;
    }
  }
  .about-right {

    h5 {
      padding-left: 25px;
    }
    .ask-box {
      width: 405px;
      padding: 12px 24px;
      border-left: 1px solid #D5D9D9;
    }
  }
}
</style>
